<template>
<!-- todo-> 优化：与Comingsoon布局相同，后期可封装成组件 -->
  <div>
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="到底了，快放手吧！"
      @load="onLoad"
      :immediate-check="false"
    >
      <van-cell v-for="item in datalist" :key="item.filmId" @click="handleJumpdetails(item.filmId)">
        <img :src="item.poster" alt="">
        <div class="formal">
          <div class="info">
            <div class="title">
              {{ item.name }}&nbsp
              <span>{{ item.item.name }}</span>
            </div>
            <div class="text">
              {{ item.grade ? '观众评分&nbsp' : '暂无评分' }}
              <span class="grade" v-show="item.grade">{{ (item.grade * 1).toFixed(1) }}</span>
            </div>
            <div class="text">
              主演:
              <span v-for="data in item.actors">
                  {{ data.name }}
              </span>
            </div>
            <div class="text">
              {{ item.nation }}&nbsp
              |&nbsp
              {{ item.runtime }}分钟
            </div>
          </div>
          <div class="btn">
            <div class="buy">购票</div>
          </div>
        </div>
      </van-cell>
    </van-list>
  </div>
</template>
<script>

import http from '@/util/http'   // 导入的是一个对象
import {mapState} from "vuex";

export default {
  data() {
    return {
      datalist: [],
      loading: false,
      finished: false,
      pageNum: 1,
      total: 0
    }
  },
  computed:{
    ...mapState(['cityId'])
  },
  mounted() {
    http.httpForList(this.cityId,1).then(res => {
      // console.log(res.data.data.films)
      this.datalist = res.data.data.films
      this.total = res.data.data.total   // 后台数据总长度，用于判断数据是否全部加载完成
      // console.log(res.data.data.total)
    })
  },
  methods: {
    handleJumpdetails(id) {
      // console.log(id)

      // 路由编程式导航
      // location.href = '#/details'   // 这种只有#模式才可跳转

      // 1.通过路径跳转
      // this.$router.push(`/details/${id}`)    // 自动识别模式，哪种都可以跳转

      // 2.通过命名路由跳转
      this.$router.push({
        name: 'hhlDetails',
        params: {
          id
        }
      })

    },

    // 懒加载
    onLoad() {
      // 数据全部加载完成
      if (this.datalist.length >= this.total && this.total !== 0) {
        this.finished = true;
        return
      }

      // console.log("到底了")
      // 异步更新数据
      this.pageNum++
      http.httpForList(this.cityId,1, this.pageNum).then(res => {
        this.datalist = [...this.datalist, ...res.data.data.films]  // ...合并数组

        // 加载状态结束
        this.loading = false;
      })
    },
  },
}
</script>
<style lang="scss" scoped>
.van-list {
  color: #4d4d4d;
  margin-bottom: 49px;

  .van-cell:before {
    position: absolute;
    right: 0;
    top: 0;
    left: 0;
    height: 1px;
    content: '';
    -webkit-transform: scaleY(.2);
    transform: scaleY(.2);
    background-color: #ececec;
  }

  .van-cell {
    width: 100%;
    height: 124px;
    padding: 15px;
    box-sizing: border-box;
    //border-bottom: 1px solid #ececec;
    display: flex;
    position: relative;

    img {
      float: left;
      width: 66px;
      height: auto;
      border-radius: 2px;
    }

    .formal {
      margin-left: 66px;
      flex: 1;
      display: flex;
      justify-content: space-between;

      .info {
        margin: 8px 10px;
        display: flex;
        flex-direction: column;
        justify-content: space-around;

        .title {
          height: 16px;
          font-size: 16px;
          color: #191a1b;
          margin-bottom: 2px;
          display: flex;
          align-items: center;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;

          span {
            font-size: 12px;
            line-height: 14px;
            color: #fff;
            padding: 0 2px;
            background-color: #d2d6dc;
            border-radius: 2px;
          }
        }

        div {
          flex-wrap: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 1; /* 能够显示的行数，超出部分用...表示*/
          -webkit-box-orient: vertical;
        }

        .text {
          line-height: 16px;
          font-size: 13px;
          color: #797d82;
          margin-top: 4px;
        }

        .grade {
          font-size: 14px;
          color: #ffb232;
        }
      }

      .btn {
        max-width: 50px;
        min-width: 50px;
        position: relative;

        .buy {
          width: 50px;
          height: 25px;
          font-size: 12px;
          color: #ff5f16;
          background-color: #fff;
          box-sizing: border-box;
          position: absolute;
          top: 50%;
          right: 0;
          transform: translateY(-50%);
          z-index: 0;
          display: flex;
          justify-content: center;
          align-items: center;
        }

        .buy:before {
          content: '';
          position: absolute;
          top: 0;
          left: 0;
          width: 125%;
          height: 125%;
          border: 0.01rem solid #ff8e63;
          border-radius: 3px;
          transform-origin: 0 0;
          transform: scale(0.8, 0.8);
          box-sizing: border-box;
        }
      }
    }
  }
}
</style>
